<template>
  <div class="item-form-button">
    <a-list size="small">
      <a-list-item v-for="(item, idx) in flowEvents" :key="idx">
        <a-list-item-meta :title="item.name"> </a-list-item-meta>
        <template #actions>
          <a-select
            v-model="item.value"
            :style="{ width: '240px' }"
            placeholder="请选择"
            allow-clear
          >
            <a-option :value="0">Beijing</a-option>
            <a-option :value="1">Shanghai</a-option>
            <a-option :value="2">Guangzhou</a-option>
          </a-select>
        </template>
      </a-list-item>
    </a-list>
  </div>
</template>

<script setup>
import { ref, onMounted, toRaw } from "vue";
import { v4 } from "uuid";
import { useFlowStore } from "@/stores/index";

let flowStore = useFlowStore();
let { flowDefinition } = flowStore;

const props = defineProps({
  flowNodeConfig: { type: Object },
});

const flowEvents = ref([
  {
    id: v4(),
    name: "保存后事件",
    value: "",
    content: "发起节点保存操作，审批节点下无保存操作，可在草稿箱查看",
  },
  {
    id: v4(),
    name: "提交后事件",
    value: "",
    content: "发起节点填写完申请单，,提交流程到下一步，可在我发起的查看",
  },
  {
    id: v4(),
    name: "审批通过后事件",
    value: "",
    content: "审批节点同意该审核之操作，审批通过，可在我已办查看",
  },
  {
    id: v4(),
    name: "拒绝后事件",
    value: "",
    content: "节点负责人可以拒绝该流程（拒绝后流程直接结束，标记为已拒绝）",
  },
  {
    id: v4(),
    name: "撤回后事件",
    value: "",
    content: "转交给他人办理，依然在当前节点",
  },
]);

const initNodeEvents = (node) => {
  node.flowEvents = toRaw(flowEvents.value);
};
onMounted(() => {
  initNodeEvents(props.flowNodeConfig);
  flowEvents.value = props.flowNodeConfig?.flowEvents || flowEvents.value;
});
</script>

<style lang="less">
.item-form-button {
  .arco-list-item-meta-title {
    font-size: 16px;
  }
  .arco-list-item-meta-description {
    font-size: 12px;
  }
}
</style>